<template>
  <div class="shopDetail">
      <van-nav-bar title="订单详情"  @click-left="$router.history.go(-1)">
        <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
      </van-nav-bar>
      <div class="peopleMessage mb-30">
        <img :src='otherInfo.userPhoto' class="peoplePho l" @click.stop='$router.push({path:"otherUser",query:{userId:otherInfo.userId}})'/>
        <div class="center l">
          <h1>{{otherInfo.userName}}</h1>
          <div><img src="../../../public/images/huizhang.png"/>信用值 &nbsp{{otherInfo.creditNum}} </div>
        </div>
        <img @click='gz(otherInfo.userId,otherInfo.isFollow)' src="../../../public/images/qt_50.png" v-if='otherInfo.isFollow=="-1"' class="btn_gz r" />
        <img @click='gz(otherInfo.userId,otherInfo.isFollow)' src="../../../public/images/qt_53.png" v-else class="btn_gz r" />
        <div class="clear"></div>
      </div>
      <div :class="info.status==1? 'shopMessage shopMessageIng' : 'shopMessage'">
        <div class="title">
          <p class="l">{{info.title}}</p>
          <div class="publicTags l">{{info.quality}}</div>
          <div class="clear"></div>
        </div>
        <p class="time">{{info.dbCreateTime}} 发布</p>
        <div class="price">
          <p class="l">￥{{info.price}}</p>
          <div class="tags_1 l" v-if='info.bargain==0'>不讲价</div>
          <div class="tags_1 l" v-else>可议价</div>
          <div class="clear"></div>
        </div>
        <div class="navs mt-10 flex_between" @click='$router.push({path:"shopDetail",query:{categoryId:info.commodityId}})'>
          <div class="navTxt">
            <p class="hide_otherThree">{{info.content}}</p>
          </div>
          <img :src="info.images[0]" />
        </div>
        <div class="bot">
          <div class="l">868人看到</div>
          <div class="otherNum1 ml-70 l"><img src="../../../public/images/qt_80.png"/>{{info.commentNum}}</div>
          <div class="otherNum2 ml-70 l"><img src="../../../public/images/qt_78.png"/>{{info.thumbUpNum}}</div>
          <div class="jubao r"><img src="../../../public/images/qt_83.png" @click='$router.push({path:"report"})'/>举报</div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="record">
        <div class="public left flex">
          <img src='../../../public/images/qt_03.png'/>
          <div>我的手机号：{{otherInfo.userId}}</div>
        </div>
        <div class="public right flex">
          <div>我的手机号：{{userId}}</div>
          <img src='../../../public/images/qt_03.png'/>
        </div>
      </div>
      <div class="tips"><img src='../../../public/images/qt_32.png'/>我们目前的交易方式为线下交易，请自行联系哦~</div>
      <div class="menu" v-show='$route.query.status=="2"'>
        <div class="del l"><img src="../../../public/images/qt_65.png"/> 删除订单</div>
        <div class="sure btn r">评价</div>
        <!-- <div class="jiaoyi btn r">继续交易</div> -->
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      info:{},
      otherInfo:{},
      userId:"",
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.orderDetail,{orderId:encodeURI(this.$route.query.id)}).then(data=>{
        data.data.commodity.dbCreateTime=this.ConvertIso(data.data.commodity.dbCreateTime);
        data.data.commodity.images=JSON.parse(data.data.commodity.images);
        this.userId=data.data.userId;
        this.info=data.data.commodity;
        this.getUserInfo(data.data.commodity.userId)
      })
    },
    getUserInfo(userId){
      this.$get(this.$api.user.otherInfo,{userId:userId}).then(data=>{
        if(!data.data.userPhoto) data.data.userPhoto=require('../../../public/images/avtor.png');
        this.otherInfo=data.data;
      })
      
    },
    gz(userId,follow){
      let that=this;
      this.vueGz(userId,follow,function(){
        that.getMessage();
      })
    },
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shopDetail{background-color: #F5F5F5;height: 100vh;}
  .peopleMessage{padding: 0.3rem;background-color: #fff;}
  .peopleMessage .peoplePho{width: 0.8rem;height: 0.8rem;display: block;overflow: hidden;border-radius: 50%;}
  .peopleMessage .center{margin-left: 0.28rem;}
  .peopleMessage .center h1{font: 0.3rem/0.4rem '微软雅黑';color: #4AACE9;}
  .peopleMessage .center div{font: 0.24rem/0.4rem '微软雅黑';color: #999999;}
  .peopleMessage .center div img{display: inline-block;width:0.24rem;height: 0.24rem;margin: 0 0.1rem 0.05rem 0;}
  .peopleMessage .btn_gz{width: 1.16rem;height: 0.46rem;display: block;margin-top: 0.17rem;}
  .shopMessage{padding: 0.3rem;position: relative;background-color: #fff;}
  .shopMessage::before{content: '已完成';background-color: #CCCCCC;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessageIng::before{content: '交易中';background-color: #4aace9;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .shopMessage .title{font: 0.42rem/0.6rem '微软雅黑';color: #333333;}
  .shopMessage .title p{display: inline-block;}
  .shopMessage .title .publicTags{margin-top: 0.15rem;}
  .shopMessage .time{font: 0.24rem/0.4rem '微软雅黑';color: #999;}
  .shopMessage .price p{font: 0.48rem/0.8rem '微软雅黑';color: #E63D40;display: inline-block;}
  .shopMessage .price .tags_1{border-radius: 0.18rem;background-color: #EDF0F2;text-align: center;color: #999999;font: 0.18rem/0.36rem '微软雅黑';height: 0.36rem;margin-top: 0.22rem;margin-left: 0.24rem;padding: 0 0.2rem;}
  .shopMessage .navs .navTxt{height:1.65rem;flex: 1;border: 2px solid #DDDDDD;box-sizing: border-box;}
  .shopMessage .navs .navTxt p{font: 0.28rem/0.34rem '微软雅黑';color: #333333;margin: 0.26rem;}
  .shopMessage .navs img{width:2.14rem;height:1.65rem;display: block;}
  .shopMessage .bot{font: 0.24rem/0.4rem '微软雅黑';color:#AAAAAA;margin-top: 0.34rem;}
  .shopMessage .bot img{width: 0.34rem;height: 0.34rem;display: inline-block;margin:0 0.1rem 0.05rem;}
  .liuyanTitle{padding:0.28rem;background-color: #fff;font: 0.3rem/0.5rem '微软雅黑';}
  .liuyanTitle h3{color: #000;}
  .liuyanTitle p{color: #AAAAAA;}
  .liuyanList{padding: 0.3rem;background-color: #fff;margin-bottom: 1.2rem;}
  .liuyanList>li .left{width: 0.7rem;height: 0.7rem;}
  .liuyanList>li .right{flex: 1;}
  .liuyanList>li .rightTop {font: 0.24rem/0.7rem '微软雅黑';color: #AAAAAA;}
  .liuyanList>li .rightTop .otherNum1{}
  .liuyanList>li .rightTop .otherNum1 img{width: 0.3rem;height: 0.3rem;display: inline-block;margin: 0.2rem;}
  .liuyanList>li .rightTop .name{color: #4AACE9;font: 0.32rem/0.7rem '微软雅黑';width: 3rem;}
  .liuyanList>li .txt{margin: 0.28rem 0;font: 0.34rem/0.5rem '微软雅黑';color: #323333;}
  .liuyanList>li ul{background-color: #F7F7F7;padding: 0.21rem;}
  .liuyanList>li ul li{font: 0.3rem/0.5rem '微软雅黑';color: #929292;}
  .liuyanList>li ul li span{color: #323333;}
  .menu{position: fixed;left: 0;bottom: 0;background-color: #fff;width: 100%;border-top: 1px solid #F7F7F7;}
  .menu .del{margin-left: 0.62rem;font-size: 0.26rem;line-height: 1.2rem;color: #333333;}
  .menu .del img{width: 0.3rem;height: 0.28rem;display: inline-block;margin: 0 0.1rem 0.05rem 0;}
  .menu .btn{width: 1.88rem;height: 0.8rem;border-radius: 0.4rem;text-align: center;font: 0.3rem/0.8rem '微软雅黑';margin-top: 0.2rem;color: #fff;}
  .menu .jiaoyi{background-color: #F88222;margin-right: 0.42rem;}
  .menu .sure{background-color: #4AACE9;margin-right: 0.3rem;}
  .tips{padding: 0.3rem;background-color: #fff;font: 0.28rem/0.4rem '微软雅黑';color: #FEA64E;margin-bottom: 1.2rem;}
  .tips img{width: 0.3rem;height: 0.3rem;display: inline-block;margin-right: 0.1rem;}


  .record{padding:0.31rem 0.31rem 0 0.31rem;background-color: #fff;margin-top: 0.31rem;border-bottom:1px solid #CCCCCC;}
  .record .public{margin-bottom: 0.32rem;}
  .record .public img{width: 0.8rem;height: 0.8rem;border-radius: 50%;display: block;overflow: hidden;}
  .record .public div{flex: 1;font: 0.28rem/0.4rem '微软雅黑';border:0.02rem solid #DDDDDD;padding: 0.26rem;border-radius: 0.08rem;position: relative;}
  .record .left div{margin-left: 0.38rem;}
  .record .right div{margin-right: 0.38rem}
  .record .left div::before{content: '';width:0.25rem;height: 0.16rem;position:absolute;left:-0.24rem;top:0.3rem;background: url('../../../public/images/left.png') no-repeat;background-size: 100% 100%;background-color: #fff;}
  .record .right div::before{content: '';width:0.25rem;height: 0.16rem;position:absolute;right:-0.24rem;top:0.3rem;background: url('../../../public/images/right.png') no-repeat;background-size: 100% 100%;background-color: #fff;}
</style>
